<template>
	<view class="login-page">
		<u-navbar leftIconColor="transparent" bgColor="transparent" :autoBack="false" :placeholder="false">
		</u-navbar>
		<view class="login-top">
			<view class="top">
				<view class="top-title">
					登录
				</view>
				<view class="top-text">
					欢迎您的加入
				</view>
			</view>
		</view>
		<view class="login-content">
			<view class="entry">
				<u--input maxlength="16" border="none" color="#fff" v-model="account" placeholder="请输入您的手机号">
					<template slot="suffix" v-if="logininfo!=''">
						<u-icon @click="cutStatus" v-if="numStatus == false" name="arrow-down-fill" color="#fff"
							size="18"></u-icon>
						<u-icon @click="cutStatus" v-if="numStatus == true" name="arrow-up-fill" color="#fff"
							size="18"></u-icon>
					</template>
				</u--input>
			</view>
			<view class="entry">
				<u--input maxlength="16" :type="pass_type" border="none" color="#fff" v-model="password"
					placeholder="请输入您的密码">
					<template slot="suffix">
						<u-icon v-if="pass_type == 'password'" name="eye-fill" color="#fff" size="18"
							@click="changeType"></u-icon>
						<u-icon v-else name="eye-off" color="#fff" size="18" @click="changeType"></u-icon>
					</template>
				</u--input>
				<!-- suffixIcon="eye" suffixIconStyle="color: #fff" -->
			</view>
			<view class="forgot">
				<view @click="gopass">忘记密码？</view>
				<!-- <view @click="goRegister">注册账号</view> -->
			</view>
			<view class="btn" @click="goLogin">
				<u-button class="btn-color" size="large" color="linear-gradient( 90deg, #C8F673 0%, #98F083 100%)" type="primary"
					text="登录" shape="circle"></u-button>
					<image class="logo" src="../../static/login/login-logo.png" mode=""></image>
			</view>
<!-- 			<view class="register" @click="goapp">
				下载APP
			</view> -->
			<view class="record-num" v-if="numStatus == true">
				<view v-if="logininfo!=''">
					<view class="num-item" @tap.stop="gokjlogin(item)" v-for="(item,index) in logininfo" :key="index">
						<view>{{item.account}}</view>
						<view @tap.stop="removeItem(index)">
							<u-icon name="close" color="#000" size="18"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="register" @click="goRegister">
				<text>
					注册账号
				</text>
				<image src="/static/login/right.png" mode=""></image>
			</view>
		</view>
<!-- 		<view class="kefu">
			<u-icon name="server-fill" @click="gokefu" color="#ffffff" size="44"></u-icon>
		</view> -->
	</view>
</template>
<script>
	import MD5 from '@/common/md5.min.js'
	export default {
		data() {
			return {
				numStatus: false,
				account: '',
				password: '',
				pass_type: 'password',
				type: 0,
				logininfo: [],
				isAppleBrowser: false
			}
		},
		onShow() {
			this.detectBrowser()
			this.logininfo = uni.getStorageSync('logininfo') || ''
			if (this.logininfo == '' || this.logininfo == undefined) {
				this.type = 0
			} else {
				this.type = 1
			}
		},
		methods: {
			detectBrowser() {
				const userAgent = navigator.userAgent;
				// 检测是否是苹果设备（iPhone、iPad、iPod）
				const isAppleDevice = /iPhone|iPad|iPod/i.test(userAgent);
				const isSafari = /Safari/i.test(userAgent) && !/Chrome/i.test(userAgent);
				this.isAppleBrowser = isAppleDevice && isSafari;
				console.log('isAppleBrowser:', this.isAppleBrowser);
			},
			gokefu() {
				uni.navigateTo({
					url: '/pages/my/kefu/index?type=1'
				})
			},
			gokjlogin(item) {
				this.account = item.account
				this.password = item.password
				this.numStatus = false
			},
			cutStatus() {
				this.numStatus = !this.numStatus
			},
			removeItem(index) {
				let app = this
				uni.showModal({
					title: '提示',
					content: '是否删除此账号！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							})
							app.logininfo.splice(index, 1);
							uni.setStorageSync('logininfo', app.logininfo);
							app.numStatus = false
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goRegister() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			goapp() {
				window.open('https://web.sunsk.top/app/')
			},
			changeType() {
				if (this.pass_type == 'password') {
					this.pass_type = 'text'
				} else {
					this.pass_type = 'password'
				}
			},
			gopass() {
				// uni.showToast({
				// 	title: '即将跳转客服！',
				// 	icon: 'none'
				// })
				// setTimeout(() => {
				// 	uni.navigateTo({
				// 		url: '/pages/my/kefu/index'
				// 	})
				// }, 1000)
				uni.navigateTo({
					url: '/pages/login/forget'
				})
			},
			goLogin() {
				if (this.account == '') {
					uni.showToast({
						title: '账号不能为空',
						icon: 'none'
					})
					return
				}
				if (this.password == '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					phone: this.account,
					password: MD5(this.password),
					type: 2
				}
				console.log(params)
				this.$Request({
					method: 'POST',
					url: '/api/Login/sign_in',
					data: params
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						if (this.type == 1) {
							let arr = uni.getStorageSync('logininfo')
							let num = 0
							arr.map(item => {
								if (item.account == this.account) {
									num = num + 1
								}
							})
							if (num == 0) {
								let info = {
									account: this.account,
									password: this.password
								}
								arr.push(info)
								uni.setStorageSync('logininfo', arr);
							}
						} else {
							let arr = []
							let info = {
								account: this.account,
								password: this.password
							}
							arr.push(info)
							uni.setStorageSync('logininfo', arr);
						}
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('info', res.data);
						uni.switchTab({
							url: '/pages/home/index'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.btn-color {
		color: #17191A !important;
		font-weight: bold;
	}
</style>
<style lang="scss" scoped>
	.login-page {
		height: 100vh;
		background-image: url('../../static/login/login-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100vh;

		.kefu {
			position: fixed;
			right: 20rpx;
			bottom: 28%;
		}

		.login-top {
			padding: 30rpx;

			.top {
				color: #fff;
				margin-top: 200rpx;

				.top-title {
					font-size: 55rpx;
					font-weight: 600;
				}

				.top-text {
					font-size: 28rpx;
					margin-top: 20rpx;
				}
			}
		}

		.login-content {
			padding: 30rpx;
			color: #fff;
			position: relative;

			.record-num {
				width: 92%;
				position: absolute;
				top: 25%;
				left: 30rpx;
				color: #000;
				border-radius: 10rpx;
				overflow: hidden;
				background-color: #fff;

				.num-item {

					padding: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
			.entry {
				padding: 30rpx;
				background-color: rgba(238, 238, 238, 0.2);
				border-radius: 50rpx;
				margin-top: 40rpx;
			}

			.forgot {
				margin-top: 30rpx;
				font-size: 28rpx;
				text-align: center;
			}

			.btn {
				margin-top: 100rpx;
				position: relative;
				.logo {
					width: 126rpx;
					height: 133rpx;
					position: absolute;
					left: 40rpx;
					top: -45rpx;
				}
			}

			.register {
				margin-top: 30rpx;
				font-size: 28rpx;
				text-align: center;
				image {
					width: 27.86rpx;
					height: 19.93rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>